<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的事件绑定</title>
    <script src="../vue.js"></script>
   
</head>
<body>
    <div id="app">  
             <!-- 不写括号  可获取事件对象      -->
            <!-- <button @click="handleClick">Button</button> -->
             <!-- 写括号  并且$event可获取事件对象    还可以传其他参数     -->
            <button @click="handleClick($event)">Button</button>

            <!-- <form action="/abc"  @click="handleClick">
                <input type="submit" value="">

            </form> -->
            <!--   修饰符  stop  self -->
            <!-- self   要求，click事件只有在e.target = e.currentTaget的时候才会执行 
            
            阻值冒泡
            -->
            <div @click.self ="handleClick">
                nice
               <div>hello world</div>

            </div>
                <!--   once   修饰符 -->
             <div @click.once ="handleClick">
                <div>hello world</div> 
             </div>
            <!--    不在使用冒泡规则 ，而是 使用捕获规则 -->
             <div @click.capture ="handleClick">
                <div @click.capture ="handleClickInner">hello world</div> 
             </div>
             <!-- 
                 按键修饰符
                 esc
                 enter
                 tab
                 系统修饰符
                 Ctrl
                 shift
                 meta
                 鼠标按键
                 left
                 middle
                 right

              -->

              <div id ="app">               
                    <input type="text" @keydown.enter="handleKeyDown">
                    <div @click.right="handleClickMouse">click</div>
              </div>
      
    </div>
    
    <script>
       
    var vm = new Vue({
           el:"#app",
           methods:{
                // handleClick:function( e ){
                //     console.log(e);
                // }
                // handleClick:function( e ){
                //    e.preventDefault();
                // }
                handleClick:function(){
                    alert('outer');
               },
               handleClickInner:function(){
                    alert('inner');
               },
               handleKeyDown:function(e){
                   console.log(e.target.value);

               },
               handleClickMouse:function(e){
                console.log("right");
               }
           }
        });
       
    </script>
</body>
</html>